import 'package:ati_package/core/extension/ati_widgets_extension.dart';
import 'package:ati_package/core/utils/ati_assets.dart';
import 'package:ati_package/core/utils/ati_color.dart';
import 'package:ati_package/core/utils/ati_font.dart';
import 'package:ati_package/pages/common/ati_scaffold.dart';
import 'package:ati_package/pages/common/widgets/ati_common_btn.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class UserOrderDetView extends StatefulWidget {
  const UserOrderDetView({super.key});

  @override
  State<UserOrderDetView> createState() => _UserOrderDetViewState();
}

class _UserOrderDetViewState extends State<UserOrderDetView> {
  @override
  Widget build(BuildContext context) {
    return AtiScaffold(
      title: '订单详情',
      body: Container(
        padding: EdgeInsets.only(top: 10.r, left: 16.r, right: 16.r),
        child: Column(
          children: [
            _buildStateWidgets(),
            _buildReceivingAddressWidgets(),
            _buildProductWidgets(),
            _buildTimeWdgetAndBtn(),
          ],
        ),
      ),
    );
  }

  _buildStateWidgets() {
    return Container(
      margin: EdgeInsets.only(bottom: 10.r),
      padding: EdgeInsets.symmetric(vertical: 12.5.r, horizontal: 16.r),
      decoration: BoxDecoration(
        color: Color(0xFF02BD6E),
        borderRadius: BorderRadius.circular(10.r),
      ),
      child: Row(
        children: [
          Image.asset(
            width: 24.r,
            height: 26.r,
            AtiAssets.userOrderState,
            package: 'ati_package',
          ),
          SizedBox(width: 7.5.r),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                '待收货',
                style: TextStyle(
                  fontSize: AtiFont.font14,
                  color: AtiColor.textHLColor1,
                ),
              ),
              SizedBox(height: 2.5.r),
              Text(
                '订单编号：35637647653424',
                style: TextStyle(
                  fontSize: AtiFont.font12,
                  color: AtiColor.textHLColor1,
                ),
              ),
            ],
          ),
          Spacer(),
          Image.asset(
            width: 22.r,
            height: 22.r,
            AtiAssets.atiCopyIcon,
            package: 'ati_package',
          ),
        ],
      ),
    );
  }

  _buildReceivingAddressWidgets() {
    return Container(
      margin: EdgeInsets.only(bottom: 10.r),
      width: double.infinity,
      padding: EdgeInsets.symmetric(vertical: 10.r, horizontal: 16.r),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(10.r),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '王琪 130****3356',
            style: TextStyle(
              fontSize: AtiFont.font14,
              color: AtiColor.textColor1,
              fontWeight: FontWeight.w600,
            ),
          ),
          SizedBox(height: 2.5.r),
          Text(
            '中国 I 青海省海南藏族自治州同德县黄河',
            style: TextStyle(
              fontSize: AtiFont.font12,
              color: Color(0xFF666666),
            ),
          ),
        ],
      ),
    );
  }

  _buildProductWidgets() {
    return Container(
      padding: EdgeInsets.only(
        top: 10.r,
        bottom: 10.r,
        left: 16.r,
        right: 16.r,
      ),
      margin: EdgeInsets.only(bottom: 10.r),

      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8.r),
      ),

      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              ClipRRect(
                borderRadius: BorderRadius.circular(10.r),
                child: CachedNetworkImage(
                  imageUrl: 'https://picsum.photos/800/400?blur', // 👈 网络图片URL
                  width: 82.r,
                  height: 82.r,
                  fit: BoxFit.cover, // 保持比例填充
                  placeholder: (context, url) =>
                      const CircularProgressIndicator(), // 加载中
                  errorWidget: (context, url, error) =>
                      const Icon(Icons.error), // 加载失败
                ),
              ),
              SizedBox(width: 10.r),
              Flexible(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Text(
                      '直奔竞价适合吃素的呢140ml',
                      style: TextStyle(
                        fontSize: AtiFont.font14,
                        color: AtiColor.textColor1,
                      ),
                    ),
                    SizedBox(height: 30.r),
                    Row(
                      children: [
                        Text.rich(
                          TextSpan(
                            children: [
                              TextSpan(
                                text: '23480积分',
                                style: const TextStyle(
                                  color: Colors.green,
                                  fontWeight: FontWeight.bold,
                                  fontSize: 15,
                                ),
                              ),
                              const TextSpan(
                                text: " 积分",
                                style: TextStyle(
                                  color: Colors.green,
                                  fontSize: 13,
                                ),
                              ),
                            ],
                          ),
                        ),
                        Spacer(),
                        Text(
                          'x5',
                          style: TextStyle(
                            fontSize: AtiFont.font12,
                            color: Color(0xFF666666),
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    ).addTapGesture(onTap: () {});
  }

  _buildTimeWdgetAndBtn() {
    return Container(
      child: Column(
        children: [
          Container(
            width: double.infinity,
            padding: EdgeInsets.symmetric(horizontal: 16.r, vertical: 10.r),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(8.r),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  '订单编号：35637647653424',
                  style: TextStyle(
                    fontSize: AtiFont.font12,
                    color: AtiColor.textColor1,
                  ),
                ),
                SizedBox(height: 2.5.r),
                Text(
                  '创建时间：2024.06.23 11:2',
                  style: TextStyle(
                    fontSize: AtiFont.font12,
                    color: AtiColor.textColor1,
                  ),
                ),
                SizedBox(height: 2.5.r),
                Text(
                  '发货时间：35637647653424',
                  style: TextStyle(
                    fontSize: AtiFont.font12,
                    color: AtiColor.textColor1,
                  ),
                ),
                SizedBox(height: 2.5.r),
                Text(
                  '收货时间：2024.06.23 11:2',
                  style: TextStyle(
                    fontSize: AtiFont.font12,
                    color: AtiColor.textColor1,
                  ),
                ),
              ],
            ),
          ),

          AtiCommonBtn(
            onPressed: () {},
            margin: EdgeInsets.only(top: 62.5.r, left: 35.r, right: 35.r),
            titleStr: '确认收货',
          ),
        ],
      ),
    );
  }
}
